<template>
  <div>
    <p>用户名：{{ currUser.username }}</p>
    <p>上次登录IP：{{ currUser.lastLoginIp }}</p>
    <p>上次登录时间:{{ currUser.lastLoginDate }}</p>
    <button
      style="display: inline-block; margin-right: 30px"
      @click="logoutMethod"
    >
      退出登录
    </button>
    <button
      style="display: inline-block; margin-right: 30px"
      @click="openEmaildialog"
    >
      修改邮箱
    </button>
    <button style="display: inline-block" @click="openPwdialog">
      修改密码
    </button>
    <!-- 修改邮箱 -->
    <el-dialog v-model="dialogFormVisible1" title="修改邮箱" width="500">
      <el-form :model="changeEmParam">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="changeEmParam.userName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="新邮箱" :label-width="formLabelWidth">
          <el-input v-model="changeEmParam.newEmail" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelChangeEm">取消</el-button>
          <el-button type="primary" @click="cofirmChangeEm"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog v-model="dialogFormVisible2" title="修改密码" width="500">
      <el-form :model="changePWParam">
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="changePWParam.email" autocomplete="off" />
        </el-form-item>

        <el-form-item label="旧密码" :label-width="formLabelWidth">
          <el-input v-model="changePWParam.oldPassword" autocomplete="off" />
        </el-form-item>

        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input v-model="changePWParam.newPassword" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelChangePw">取消</el-button>
          <el-button type="primary" @click="confirmChangePw"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { definedUser } from "../store/user";
import { logout, changeEmail,changePassword } from "../api/login";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus'

//创建仓库变量
const currUser = definedUser();

//路由对象
const router = useRouter();
//退出登录
const logoutMethod = async () => {
  const { data } = await logout();
  console.log(data);
  if (data.code == 200) {
    localStorage.removeItem("userPinia");
    currUser.username = "";
    currUser.lastLoginDate = "";
    currUser.lastLoginIp = "";
    localStorage.removeItem("token");
    router.push("/login");
  }
};

//修改邮箱dialog
import { reactive, ref } from "vue";
const dialogFormVisible1 = ref(false);
const formLabelWidth = "140px";

//参数
const changeEmParam = reactive({
  userName: "liangliang",
  newEmail: "3010141098@qq.com",
});
//打开修改邮箱对话框
const openEmaildialog = () => {
  dialogFormVisible1.value = true;
};
//修改邮箱
const cofirmChangeEm = async () => {
 await changeEmail(changeEmParam);
 dialogFormVisible1.value = false
 ElMessage.success("修改邮箱成功")
};

//取消修改邮箱
const cancelChangeEm=()=>{
  dialogFormVisible1.value = false
 ElMessage.success("取消邮箱修改")
}

//修改密码dialog
const dialogFormVisible2 = ref(false);
//参数
const changePWParam = reactive({
  email: "",
  newPassword: "",
  oldPassword: "",
});

//打开修改密码对话框
const openPwdialog = () => {
  dialogFormVisible2.value = true;
};

//修改密码
const confirmChangePw = async () => {
 await changePassword (changePWParam);
 dialogFormVisible2.value = false
 ElMessage.success("修改密码成功")
};

//取消修改密码
const cancelChangePw=()=>{
  dialogFormVisible2.value = false
 ElMessage.success("取消密码修改")
}
</script>

<style scoped>
</style>